<template>
	<view class="order ">
		<u-tabs class='tabs' active-color="#303133"  :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="content u-skeleton" v-if="dataList.length">
			<u-card v-for="item in dataList" :key='item.id' :title="'订单号：'+item.orderNumber" :sub-title="item.createTime" margin="20rpx">
				<view class="u-skeleton-rect" slot="body">
					<view class="item">
						地址：{{item.title}}
					</view>
					<view class="item">
						项目：{{item.des}}
					</view>
				</view>
				<view class="u-skeleton-rect" slot="foot">
					<view class="foot_btn">
						<u-button size="mini">查看详情</u-button>
					</view>
				</view>
			</u-card>
			<view class="loadmore">
				<u-loadmore :status="status" :load-text="loadText" />
			</view>
		</view>
		<view v-else class="empty">
			<u-empty text="暂无订单" mode="order" ></u-empty>
			<u-button type="warning" size="mini" @click='reservation'>去预定</u-button>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<Login ref='login'></Login>
	</view>
</template>

<script>
	import Login from "../login/index.vue"
	export default {
		components:{
			Login
		},
		data() {
			return {
				status: 'nomore',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				loading:false,
				list: [{
					name: '预定成功'
				}, {
					name: '全部订单'
				}],
				current: 0,
				dataList:[{
					id:1,
					title:'*****滑雪场',
					des:'滑雪/温泉',
					orderNumber:'1235214579641225',
					createTime:'2020-09-23'
				},{
					id:2,
					title:'*****滑雪场',
					des:'滑雪/温泉',
					orderNumber:'1235214579641225',
					createTime:'2020-09-23'
				},{
					id:3,
					title:'*****滑雪场',
					des:'滑雪/温泉',
					orderNumber:'1235214579641225',
					createTime:'2020-09-23'
				}]
			}
		},
		onShow() {
			this.$refs.login.authorize()
		},
		onLoad() {
			
		},
		methods: {
			//上拉加载
			onReachBottom(){
				console.log('上拉加载')
			},
			//去预定
			reservation(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			//tags切换
			change(index) {
				this.current = index;
				this.dataList = []
			}
		}
	}
</script>
<style lang="scss" scoped>
	.order{
		.tabs{
			position: fixed;
			left: 0;
			top:0;
			width: 100%;
			z-index: 999;
		}
		.content{
			min-height: calc(100vh - 44px);
			background-color: #F1F1F1;
			padding: 98rpx 5rpx 60rpx 5rpx;
			position: relative;
			.item{
				font-size: 14px;
				line-height: 48rpx;
			}
			.foot_btn{
				text-align: right;
			}
			.loadmore{
				position: absolute;
				left: 0;
				bottom: 20rpx;
				width: 100%;
				text-align: center;
			}
		}
		.empty{
			position: absolute;
			left: 0;
			top: 30%;
			width: 100%;
			text-align: center;
		}
	}
</style>
